<template>
	<view class="">
		<u-popup :show="show" round="12rpx" mode="center" :safeAreaInsetBottom='false'>
			<view class="hint bgf br12 pr">
				<view class="hinta flex_c c3 fw600 fs36" :style="[{background:bgnav},{color:conav}]" v-if="isTitle">{{title}}</view>
				<view class="htnta_content">
					<slot />
				</view>
				<view class="hint_btn fs28 flex_y" v-if="is_btn">
					<view class="hint_btna flex_c c23" :style="[btn_colors]" @click="click_btn">
						{{btn_text}}
					</view>
				</view>
				<view class="pa car" v-if="car" @click="carHint">
					<u-icon name="close" :color="carColor" size="34rpx"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>

	<!-- 使用 
		<setPop :show.sync="show" title='版本信息' btn_text='确定' btnColor='#50BF38' btnBrColor='#50BF38' :car='false'
			@clickBtn='show = false'>
			<view class="c3 fs28">这是版本信息这是版本信息这是版本信息这是版本信息这是版本信息</view>
		</setPop>
		 说明：确认弹窗
	-->


</template>

<script>
	/*
	 *theme 主题颜色
	 */
	export default {
		props: {
			show: { //显示隐藏弹窗
				typeof: Boolean,
				default: false,
			},
			title: { //顶部标题
				default: "温馨提示",
			},
			bgnav: { //顶部背景
				default: '#fff',
			},
			conav: { //顶部标题文字颜色
				default: '#333',
			},
			isTitle:{ //是否显示顶部标题
				typeof: Boolean,
				default: true,
			},
			btn_text: { //按钮文字
				default: "取消",
			},
			btnColor: { //按钮文字颜色
				default: '#2777FF',
			},
			btnBgColor: { //按钮背景颜色
				default: '#fff',
			},
			btnBrColor: { //按钮边框背景颜色
				default: '#2777FF',
			},
			btn_w:{ //按钮长度
				default: '100%',
			},
			br:{
				default: '40rpx',
			},
			car: { //是否显示右上角关闭图标 默认隐藏
				typeof: Boolean,
				default: false,
			},
			carColor: { //关闭图标颜色
				typeof: String,
				default: '#909090',
			},
			is_btn: { //是否显示按钮
				typeof: Boolean,
				default: true,
			}
		},
		components: {},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			click_btn() { //点击按钮
				this.$emit('clickBtn')
			},
			carHint() { //点击x关闭
				this.$emit('update:show', false)
				this.$emit('carHint')
			}
		},
		computed: {
			btn_colors() {
				return {
					color: this.btnColor,
					background: this.btnBgColor,
					'border-color': this.btnBrColor,
					width:this.btn_w,
					'border-radius':this.br
				}
			},
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.hint {
		width: 580upx;
		min-height: 280upx;
		overflow: hidden;

		.hinta {
			height: 100upx;
		}

		.htnta_content {
			margin: 10upx 30upx 50upx 30upx;
		}

		.hint_btn {
			margin: 0 30upx 30upx 30upx;

			.hint_btna {
				height: 72upx;
				border: 2upx solid #2777FF;
			}
		}

		.car {
			top: 20upx;
			right: 20upx;
		}
	}
</style>
